[Angular Material] セレクトコンポーネントのMultiple selectionでチェックボックスにチェックを入れたか外したか判定する方法

#Angular

#SPA

西村祐二

2019.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

どうも！大阪オフィスの西村祐二です。

7月7日はクラスメソッドの創立記念日ですね。

タイトルだけだと何を言っているのかわからないかもですが、

つまりは、下記のような選択式のフォームでどの項目にチェックをつけたか、または外したかを判定する方法を紹介したいと思います。

結論

$eventでフォームに対して行った操作の情報を取得することができます。

$eventオブジェクトからユーザー入力を取得する

※下記例では$eventはany型としてキャストしますのでご注意ください。

onSelectionChangeでチェックボックスにチェックしたときに、外したときのイベンドをキャッチします。その時の$eventをchangeという関数に渡します。

<mat-form-field>
  <mat-select multiple placeholder="Favorite food">
    <mat-option (onSelectionChange)="change($event)" *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

isUserInputでユーザの操作を判定し、event.source.selectedでチェックしたかを判定します。

下記ではチェックがつくと配列にvalueを追加し、チェックが外れるとvalueを削除しています。

import {Component} from '@angular/core';

@Component({
  selector: 'select',
  templateUrl: 'select.html',
  styleUrls: ['select.css'],
})
export class SelectExample {
  selectedFoods: string[] = [];
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'},
    {value: 'hotdog-3', viewValue: 'Hotdog'}
  ];

  change(event)
  {
    if(event.isUserInput) {
      if(event.source.selected) {
      this.selectedFoods.push(event.source.value);
      } else {
        this.selectedFoods = this.selectedFoods.filter(food => food !== event.source.value );
      }
      console.log(this.selectedFoods);
    }
  }
}